import { useIntersectionObserver } from '@vueuse/core'
import { App } from 'vue'
import defaultImg from '@/assets/images/200.png'

export default {
  install(app: App) {
    app.directive('lazy', {
      // Vue2 => inserted
      // Vue3 => mounted => 绑定指令的标签渲染好了，才走这儿的逻辑
      // el => 指定所绑定的 DOM 元素，例如 <img v-lazy/>，这儿的 el 就是 imgDOM
      // binding => 对象，一般我们用的最多的是 binding.value，例如 <img v-lazy="www.baidu.com/a.jpg"/>
      // 其实 binding.value 就是 www.baidu.com/a.jpg
      mounted(el, binding) {
        // 参数1：观测目标
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // 如果观测的目标 target 到达了可视区 isIntersecting 就是 true
          if (isIntersecting) {
            // 一旦赋值过一次真正的 src，其实后续就没有必要再观测图片了
            el.src = binding.value
            // 图片加载出错给一个默认的图片
            el.onerror = function () {
              el.src = defaultImg
            }
            stop()
          }
        })
      },
    })
  },
}
